<template>
  <view class="module">
    <view class="item" @click="showAd = true">
      <!-- <view class="label">地址</view> -->
      <view class="inp">
        <input
          style="pointer-events: none"
          disabled
          :value="position"
          :placeholder="placeholder"
        />
      </view>
      <!-- <view class="addr">
            <i class="iconfont icon-a-map"></i>
            <view class="test" @click="getPosition">定位</view>
          </view> -->
    </view>
    <u-popup
      :value="value"
      mode="bottom"
      safe-area-inset-bottom
      @close="$emit('input', false)"
    >
      <view class="picker-view-title">
        <div class="left" @click="showAd = false">取消</div>
        <div class="right" @click="confirm">确定</div>
      </view>
      <picker-view
        indicator-style="height:50rpx;"
        :value="defaultIndex"
        @change="selectChange"
        class="picker-view"
      >
        <picker-view-column>
          <view
            class="picker-view-item"
            v-for="(item, index) in districtList_1"
            :key="index"
            >{{ item.name }}</view
          >
        </picker-view-column>
        <picker-view-column>
          <view
            class="picker-view-item"
            v-for="(item, index) in districtList_2"
            :key="index"
            >{{ item.name }}</view
          >
        </picker-view-column>
        <picker-view-column>
          <view
            class="picker-view-item"
            v-for="(item, index) in districtList_3"
            :key="index"
            >{{ item.name }}</view
          >
        </picker-view-column>
      </picker-view>
    </u-popup>
  </view>
</template>

<script>
var district = [];

export default {
  props: {
    placeholder: {
      type: String,
      default: "请选择地址"
    },
    value: {
      type: Boolean,
      default: false
    },

    joinKey: {
      type: String,
      default: ","
    }
  },

  data() {
    return {
      province_id: "",
      city_id: "",
      district_id: "",

      districtList_1: [],
      districtList_2: [],
      districtList_3: [],
      defaultIndex: [0, 0, 0],
      showAd: false,
      position: ""
    };
  },

  methods: {
    async getDistrict(fn) {
      try {
        var res = await this.$allrequest.user.get_district({});
        district = JSON.parse(JSON.stringify(res.data));

        this.districtList_1 = res.data.map((item) => {
          delete item.cityAll;
          return item;
        });

        this.setAddressList();
        fn && fn();
      } catch (e) {
        //TODO handle the exception
      }
    },

    selectChange(e) {
      let indexs = e.detail.value;
      let yDefaultIndex = JSON.parse(JSON.stringify(this.defaultIndex));
      if (yDefaultIndex[0] != indexs[0]) {
        this.defaultIndex = [indexs[0], 0, 0, 0, 0];
      } else if (yDefaultIndex[1] != indexs[1]) {
        this.defaultIndex = [indexs[0], indexs[1], 0, 0, 0];
      } else if (yDefaultIndex[2] != indexs[2]) {
        (this.defaultIndex = [indexs[0], indexs[1], indexs[2], 0]), 0;
      } else if (yDefaultIndex[3] != indexs[3]) {
        this.defaultIndex = [indexs[0], indexs[1], indexs[2], indexs[3], 0];
      } else if (yDefaultIndex[4] != indexs[4]) {
        this.defaultIndex = [indexs[0], indexs[1], indexs[2]];
      }

      this.districtList_2 = district[this.defaultIndex[0]].cityAll;
      this.districtList_3 =
        district[this.defaultIndex[0]].cityAll[
          this.defaultIndex[1]
        ].districtAll;

      // this.districtList_4 =
      //   district[this.defaultIndex[0]].cityAll[
      //     this.defaultIndex[1]
      //   ].districtAll[this.defaultIndex[2]].townAll;
      // if (this.districtList_4.length > 0) {
      //   this.districtList_5 =
      //     district[this.defaultIndex[0]].cityAll[
      //       this.defaultIndex[1]
      //     ].districtAll[this.defaultIndex[2]].townAll[
      //       this.defaultIndex[3]
      //     ].villageAll;
      // } else {
      //   this.districtList_5 = [];
      // }
    },

    setAddressList(list = []) {
      let cityList,
        districtList,
        provinceIndex = 0,
        cityIndex = 0,
        districtIndex = 0;

      if (list && list.length) {
        cityList = district.find((el) => String(list[0]) === el.id).cityAll;
        districtList = cityList.find(
          (el) => String(list[1]) === el.id
        ).districtAll;

        provinceIndex = district.findIndex((el) => String(list[0]) === el.id);
        cityIndex = cityList.findIndex((el) => String(list[1]) === el.id);
        districtIndex = districtList.findIndex(
          (el) => String(list[2]) === el.id
        );
      } else {
        let cityAllItem = JSON.parse(JSON.stringify(district[0].cityAll));
        cityList = cityAllItem;
        districtList = cityList[0].districtAll;
      }

      this.districtList_2 = JSON.parse(JSON.stringify(cityList)).map((el) => {
        delete el.districtAll;
        return el;
      });
      this.districtList_3 = districtList;
      this.defaultIndex = [provinceIndex, cityIndex, districtIndex];
    },

    // async getPosition() {
    //   const apiRes = await this.$store.dispatch("getLocation");
    //   if (apiRes.longitude) {
    //     uni.chooseLocation({
    //       success: (res) => {
    //         this.longitude = res.longitude;
    //         this.latitude = res.latitude;
    //         this.details = res.name;
    //         this.getAddress(res.address + res.name);
    //       },
    //       fail: () => {
    //         this.$u.toast(this.$t("my.failPosition"));
    //       }
    //     });
    //   }
    // },

    // getAddress(address) {
    //   this.$allrequest.classification
    //     .addressSmart({
    //       address
    //     })
    //     .then((res) => {
    //       if (res.code == 0) {
    //         this.province_id = res.data.province_id;
    //         this.city_id = res.data.city_id;
    //         this.district_id = res.data.region_id;
    //         this.position = res.data.province + res.data.city + res.data.region;
    //       }
    //     });
    // },

    confirm() {
      this.showAd = false;
      let province_id,
        city_id,
        district_id,
        position = [],
        { districtList_1, districtList_2, districtList_3, defaultIndex } = this,
        [i1, i2, i3] = defaultIndex;

      province_id = districtList_1[i1].id;
      city_id = districtList_2[i2].id;
      district_id = districtList_3[i3].id;

      position[0] = districtList_1[i1].name;
      position[1] = districtList_2[i2].name;
      position[2] = districtList_3[i3].name;

      this.province_id = province_id;
      this.city_id = city_id;
      this.district_id = district_id;
      this.position = position;

      this.position = this.position.join(this.joinKey);
      this.$emit("input", false);
      this.$emit("ok", {
        province_id,
        city_id,
        district_id,
        position
      });

      // let i4 = val[3];
      // let i5 = val[5];
      // if (this.districtList_4.length > 0) {
      //   this.town_id = this.districtList_4[i4].id;
      // } else {
      //   this.town_id = 0;
      // }
      // if (this.districtList_5.length > 0) {
      //   if (i5) {
      //     this.village_id = this.districtList_5[i5].id;
      //   } else {
      //     this.village_id = this.districtList_5[0].id;
      //   }
      // } else {
      //   this.village_id = 0;
      // }

      // if (this.districtList_4.length > 0) {
      //   this.position[3] = this.districtList_4[i4].name;
      // }
      // if (this.districtList_5.length > 0) {
      //   if (i5) {
      //     this.position[4] = this.districtList_5[i5].name;
      //   } else {
      //     this.position[4] = this.districtList_5[0].name;
      //   }
      // }
    }
  },

  computed: {},

  mounted() {
    this.getDistrict(async () => {});
  }
};
</script>

<style lang="scss" scoped>
.module {
  width: 100%;
  height: 100%;
  flex: 1;
  overflow: hidden;
}

.item {
  display: flex;
  align-items: center;
  height: 100%;
}

.picker-view-title {
  padding: 20rpx;
  font-size: 28rpx;
  color: #1aa034;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .left {
    color: #999;
  }
}

.picker-view {
  width: 750rpx;
  height: 500rpx;
  .picker-view-item {
    height: 50rpx;
    line-height: 50rpx;
    align-items: center;
    justify-content: center;
    text-align: center;
  }
}
</style>
